<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>Home</title>

    <!--Begin  Page Level  CSS -->
    <link href="assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">
    <!--自己添加的css文件-->
    <link rel="stylesheet" href="assets/css/mycss.css">
    <link href="assets/css/pagination.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/layui/css/layui.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body class="sticky-header">


<!--开始左边的菜单栏-->
<div class="left-side sticky-left-side">

    <!--上方的logo-->
    <div class="logo">
        <a href="index.html"><img src="assets/images/logo.png" alt=""></a>
    </div>

    <div class="logo-icon text-center">
        <a href="index.html"><img src="assets/images/logo-icon.png" alt=""></a>
    </div>
    <!--logo-->
    <div class="left-side-inner">
        <!--Sidebar nav-->
        <ul class="nav nav-pills nav-stacked custom-nav">
            <li class="menu-list"><a href="preIndex.html"><i class="icon-home"></i> <span>后台管理</span></a>
                <ul class="sub-menu-list">
                    <li class="active"><a href="preIndex.html">后台首页</a></li>
                </ul>
            </li>
            <li class="menu-list "><a href="index.html"><i class="icon-home"></i> <span>资讯管理</span></a>
                <ul class="sub-menu-list">
                    <li  class="active"><a href="index.html">查看当前资讯</a></li>
                    <li><a href="modify_information.html">修改资讯</a></li>
                </ul>
            </li>

            <li class="menu-list "><a href="#"><i class="icon-layers"></i> <span>风景名胜管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_famous_scenery.html">查看现有的风景名胜</a></li>
                    <li><a href="modify_famous_scenery.html">修改风景名胜</a></li>
                </ul>
            </li>

            <li class="menu-list nav-active"><a href="#"><i class="icon-grid"></i> <span>美食管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_delicious_food.html">查看现有的美食</a></li>
                    <li><a href="modify_delicious_food.html">修改美食信息</a></li>
                </ul>
            </li>

            <li class="menu-list "><a href="#"><i class="icon-envelope-open"></i> <span>旅游路线管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_now_route.html">查看现有的路线</a></li>
                    <li><a href="modify_route.html">修改路线</a></li>
                </ul>
            </li>

            <li class="menu-list"><a href="#"><i class="icon-loop"></i> <span>酒店的管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_now_hotel.html">查看现有的酒店</a></li>
                    <li><a href="modify_now_hotel.html">查看所有酒店的全部订单</a></li>
                    <li><a href="form-wizard.html">查看全部酒店的房源信息</a></li>
                </ul>
            </li>



            <li class="menu-list "><a href="#"><i class="icon-film"></i> <span>用户管理</span></a>
                <ul class="sub-menu-list">
                    <li><a href="show_user.html">查看所有的用户</a></li>
                    <li><a href="add_user.html">增加用户</a></li>
                </ul>
            </li>




            <li class="menu-list"><a href="#"><i class="icon-lock"></i> <span>账户信息</span></a>
                <ul class="sub-menu-list">
                    <li><a href="admin_information.html"> 查看信息 </a></li>
                    <li><a href="forgot-password.html"> 修改密码 </a></li>
                </ul>
            </li>

            <li><a href="calendar.html"><i class="icon-note"></i> <span>网站首页</span></a></li>
            <li><a href="http://www.pzhu.edu.cn/"><i class="icon-wrench"></i> <span>攀枝花简介</span></a></li>

        </ul>
        <!--侧边栏结束-->

    </div>
</div>
<!--End left side menu-->


<!-- 中间面板开始-->
<div class="main-content" >

    <!-- 中间头部开始-->
    <div class="header-section">

        <!--控制侧边栏的伸缩状态-->
        <a class="toggle-btn"><i class="fa fa-bars"></i></a>


        <div th:replace="preIndex :: userAdminInfo">

        </div>

    </div>
    <!--头部分结束-->


    <!--中间包装部分开始-->
    <div class="wrapper">

        <!--中间部分的标题-->
        <div class="page-title-box">
            <h4 class="page-title">美食管理 </h4>
            <ol class="breadcrumb">
                <li>
                    <a href="#">美食管理</a>
                </li>

                <li class="active">
                    <a href="#">修改美食信息</a>
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <!--中间部分的标题结束-->
        <!--Start row-->
        <div class="row">
            <div class="col-md-12">
                <div class="white-box">
                    <h2 class="header-title">资讯的信息</h2>
                    <input type="text" name="keyword" id="myInputSearch" placeholder="请输入搜索的内容。。"  />
                    <button type="button" id="mySearchBtn" class="layui-btn">搜索</button>
                    <button type="button" id="myFlashBtn" class="layui-btn layui-btn-warm">刷新</button>
                    <div class="table-responsive">
                        <table class="layui-table" lay-size="sm">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr >
                                <th style="text-align:center">美食的ID</th>
                                <th style="text-align:center">美食的名称</th>
                                <th style="text-align:center">美食的分类</th>
                                <th style="text-align:center">美食的时间</th>
                                <th style="text-align:center">操作状态</th>
                            </tr>
                            </thead>
                            <tbody id="foodPageBody">


                            </tbody>

                            <tfoot>
                            <tr>
                                <td colspan="5" align="center">
                                    <button type="button" class="layui-btn layui-btn-lg" id="manageClassificationBtn">管理美食分类</button>
                                    <a  target="_blank" type="button" class="layui-btn layui-btn-lg" href="add_delicious_food.html">添加美食信息</a>
                                    <div id="Pagination" class="pagination" style="float: right"><!-- 这里显示分页 --></div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!--End row-->
    </div>
    <!-- End Wrapper-->


    <!--//这里应该还需要一个分页的按键-->
    <!--Start  Footer -->
    <footer class="footer-main">Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="#">攀枝花学院</a></footer>
    <!--End footer -->

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">删除风景信息</h4>
                </div>
                <div class="modal-body">
                    <span class="myModalSpan">风景id：</span><input type="text" class="myModalInput" readonly="true" value="111" id="modelId"><br/>
                    <span class="myModalSpan">风景名称：</span><input class = "myModalInput"type="text" value="乐山大佛" readonly="true" id="modelName"><br/>
                    <span class="myModalSpan">风景分类：</span><input class = "myModalInput"type="text" value="2019-11-18 11:33:44" readonly="true" id="modelCategoriza"><br/>
                    <span class="myModalSpan">发布时间：</span><input class = "myModalInput"type="text" value="2019-11-18 11:33:44" readonly="true" id="modelDate"><br/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="OkDelete">确认删除</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModa2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="closdMadalBtn">&times;</button>
                    <h4 class="modal-title" id="myModalLabe2">增加风景分类</h4>
                </div>
                <div class="modal-body">
                    <table class="display table">
                        <thead>
                        <tr >
                            <th style="text-align:center">分类名称</th>
                            <th style="text-align:center">操作状态</th>
                        </tr>
                        </thead>
                        <tbody id="classificationTableBody">

                        </tbody>
                    </table>
                    <div style="text-align:center">
                        <button type="button" class="btn btn-success round btn-add" id="addClassificationBtn">增加分类</button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModa3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="deleteClosdMadalBtn">&times;</button>
                    <h4 class="modal-title" id="myModalLabe3">确认删除</h4>
                </div>
                <div class="modal-body">
                    <div class="page-header">
                        <h1 id="deleteClassifitionName" style="text-align: center"></h1>
                    </div>
                    <button type="button" class="btn btn-danger round btn-add" id="deleteClassificationBtn">确认删除</button>
                    <button type="button" class="btn btn-success round btn-add" id="NodeleteClassificationBtn" data-dismiss="modal" aria-hidden="true">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
<!--设置一个隐藏域，进行填值的操作，实属无奈之举。太难了-->
<input type="hidden" id="itemId">
<button type='hidden' id='updateImag'/>

<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script  src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->

<script src="assets/js/jquery.pagination.js"></script>
<script src="assets/layui/layui.js"></script>


<script>

    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#updateImag' //绑定元素
            ,url: '/upload/big/image/food' //上传接口
            ,accept:'images'
            ,data:{
                id:function () {
                    return $("#itemId").val();
                }
            }
            ,done: function(res){
                //上传完毕回调
                layer.msg(res.message);
            }
            ,error: function(){
                //请求异常回调
                layer.msg("上传出现异常，请联系管理员！");
            }
        });
    });

    $(function () {
        //1.初始化变量
        window.pageNo = 1;
        window.keyword = "";
        //2.调用函数实现Ajax分页
        generateFoodPage();

        //给搜索按钮绑定单击响应函数；
        $("#mySearchBtn").click(function () {
            // layer.msg("SDfsdfsdf");
            // alert("dsfsdfds");
            var searchText = $("#myInputSearch").val();
            if (searchText == ""){
                layer.msg("请输入搜索的字符！")
                return;
            };
            window.keyword = searchText;
            generateFoodPage();
        });

        // 给刷新按钮绑定单击响应函数
        $("#myFlashBtn").click(function () {
            $("#mySearchBtn").val("");
            window.keyword = "";
            window.pageNo = 1;
            generateFoodPage();
        });

        //进行删除的操作；
        $("#OkDelete").click(function () {
            var modelId = $("#modelId").val();
            $.get("delete/foodItem", {"foodItemId": modelId}, function (data) {
                //关闭模态框
                $("#myModal").modal("hide");
                //进行提示
                layer.msg(data.message);
                // 进行浏览器的异步刷新
                generateFoodPage();
            });
        });

        //对管理风景分类注册单击响应函数;
        $("#manageClassificationBtn").click(function () {
            refreshMedel2();
        });

        $("#addClassificationBtn").click(function () {
            //弹出对话框，并输入分类信息；
            var classificationName = prompt("请输入分类的信息: ");
            //进行异步更新;
            console.log(classificationName);
            //发送异步请求，获取所有的分类信息；
            if(classificationName == "" || classificationName == null) {// 如果取消输入则会返回null
                return;
            }
            $.ajax({
                "url":"sava/food/classification",
                "type":"post",
                "contentType":"application/x-www-form-urlencoded",
                "data":{
                    "classificationName":classificationName
                },
                // 预期服务器返回的数据
                "dataType":"json",
                "error":function(response){
                    var message = response.responseJSON.message;
                    layer.msg(message);
                },
                "success":function(response){
                    layer.msg(response.message);
                    refreshMedel2();
                }
            });
        });

        $("#closdMadalBtn").click(function () {
            $("#classificationTableBody").empty();
            $("#myModa2").modal("hide");
        });

        //各种函数的绑定，要死了要死了，爸爸要死了；
        $("#deleteClassificationBtn").click(function () {
            var classificationId = $(this).attr("num");
            $.ajax({
                "url":"delete/food/classification",
                "data":{
                    "itemId":classificationId
                },
                "success":function (response) {
                    layer.msg(response.message);
                    $("#myModa3").modal("hide");
                    refreshMedel2();
                }
            });
        });
    });


    function refreshMedel2() {
        //发送异步请求，获取所有的分类信息；
        $.ajax({
            "url":"get/all/food/classification",
            "type":"post",
            "contentType":"application/x-www-form-urlencoded",
            // 预期服务器返回的数据
            "dataType":"json",
            "error":function(response){
                var message = response.responseJSON.message;
                layer.msg(message);
            },
            "success":function(response){
                $("#classificationTableBody").empty();
                var date = response.data;
                //给模态框进行填充值；
                $.each(date,function (index, value) {
                    // 进行拼接
                    var classificationId = value.id;
                    var categorizationInformationName = value.categorizationInformation;
                    var html = "<tr><td style='text-align:center'>"+categorizationInformationName+"</td>" +
                        "<td style='text-align:center'>" +
                        "<button type='button' class='btn btn-danger btn-myClass deleteBtn1' name = "+categorizationInformationName+" num=" + classificationId + ">删除</button></tr>";
                    $("#classificationTableBody").append(html);
                    $("#myModa2").modal("show");
                    //给删除按钮绑定单击响应函数；
                });
                bindDeleteClassification();
            }
        });
    }

    function bindDeleteClassification() {
        $(".deleteBtn1").click(function () {
            var classificationName =  $(this).attr("name");
            var classificationId = $(this).attr("num");
            $("#deleteClassifitionName").text(classificationName);
            $("#deleteClassificationBtn").attr("num",classificationId);
            $("#myModa3").modal("show");
        })
    }

    function generateFoodPage() {
        //发送请求，获得数据
        $.ajax({
            "url":"get/foodItem/page",
            "type":"post",
            "data":{
                "pageNo":window.pageNo,
                "keyword":window.keyword
            },
            "contentType":"application/x-www-form-urlencoded",
            // 预期服务器返回的数据
            "dataType":"json",
            "error":function(response){
                var message = response.responseJSON.message;
                layer.msg(message);
            },
            "success":function(response){

                //获取分页数据
                var pageInfo = response.data;

                //生成表格数据,因为是异步请求,所以生成表格的代码必须写在success的回调函数中;
                generateFoodTable(pageInfo);

                //初始化页码导航条
                generateNavigator(pageInfo);

                //绑定函数，点击查看详情的函数；
                bindDetailBtnClik();
            }
        });

    }

    function bindDetailBtnClik() {
        $(".deleteBtn").click(function () {
            //发送ajax请求，获取数据
            //注意，使用的thymeleaf的属性值th:id
            //获取到id的值
            var foodItemId = $(this).attr("num");
            //发送异步请求;
            $.ajax({
                "url": "get/foodItem/by/id",
                "data": {
                    "foodItemId": foodItemId
                },
                "dataType": "json",
                "error": function (response) {
                    layer.msg("服务器异常，请联系管理员！");
                    return;
                },
                "success": function (response) {
                    if (response.result == "SUCCESS") {
                        //获取到对象值；获得需要回显的数据；
                        var foodItem = response.data;
                        var id = foodItem.id;
                        var sceneryName = foodItem.foodName;
                        //这里是一个巨大的坑，巨大的坑，坑他爸爸；
                        var categorizationInformationName = foodItem.categorizationInformationName;
                        var foodDate = foodItem.foodData;
                        //把值放入模态框中；
                        $("#modelId").val(id);
                        $("#modelName").val(sceneryName);
                        $("#modelDate").val(foodDate);
                        $("#modelCategoriza").val(categorizationInformationName);
                        $('#myModal').modal("show")
                    } else {
                        layer.msg("获取信息失败，请稍后再试！");
                        return;
                    }
                }
            })
        });

        // 绑定添加大图的按钮
        $(".addImage").click(function () {
            $("#itemId").val($(this).attr("num"));
            $("#updateImag").click();
        });
    }

    //生成表格数据
    function generateFoodTable(pageInfo) {
        //清除旧的数据
        $("#foodPageBody").empty();

        //获取list属性对应的数据
        var list = pageInfo.list;

        //检测list是否包含有效数据
        if(list == null || list.length == 0) {
            $("#foodPageBody").append("<tr><td style='text-align:center;' colspan='6'>抱歉！为查询到任何匹配的数据！</td></tr>");
            return ;
        }

        //遍历list,从data中获取数据
        for(var i = 0; i < list.length; i++) {
            var foodItem = list[i];
            var itemId = foodItem.id;
            var itemName = foodItem.foodName;
            var categorizationInformationName = foodItem.categorizationInformationName;
            // var foodItemBriefIntroduction = foodItem.foodItemBriefIntroduction;
            if (categorizationInformationName == null){
                categorizationInformationName = "";
            }
            var itemData = foodItem.foodData;
            if (itemData == null){
                itemData = "";
            }
            //使用元素动态进行绑定；
            var trHTML = "<tr><td style='text-align:center'>"+(i+1)+"</td><td style='text-align:center' ><a href='#'>"+itemName+"</a></td><td style='text-align:center' >"+categorizationInformationName+"</td>" +
                "<td style='text-align:center' >"+itemData+"</td>" +
                "<td  style='text-align:center'><button type='button' class='layui-btn btn-myClass addImage'  num=" + itemId + "><i class='layui-icon'>&#xe67c;</i>上传大图</button><button type='button' class='layui-btn deleteBtn' num=" + itemId + ">删除</button><a href='update_food?itemId="+itemId+"' class='layui-btn' target='_blank'>修改</a></td></tr>";
            $("#foodPageBody").append(trHTML);
        }
    }

    function generateNavigator(pageInfo) {

        // 获取分页总记录数
        var totalRecordNo = pageInfo.total;

        // 创建分页
        $("#Pagination").pagination(totalRecordNo, {
            num_edge_entries: 3, 				//边缘页数
            num_display_entries: 4, 			//主体页数
            callback: pageSelectCallback,		//点击具体页码时调用这个函数
            items_per_page:pageInfo.pageSize, 	//每页显示1项
            current_page: (pageInfo.pageNum-1),	//当前页索引，需要将pageInfo.pageNum-1才是合适的值
            prev_text: "上一页",					//上一页按钮的文本
            next_text: "下一页",					//下一页按钮的文本
        });
    }

    function pageSelectCallback(page_index, jq){

        //page_index+1等于要前往的页面的页码
        window.pageNo = page_index + 1;

        //调用分页函数
        generateFoodPage();

        return false;
    }
</script>

</body>
</html>
